<template>
  <div class="container">
    <div class="btn" @click="exportReport">年度报告预览并导出</div>
    <div v-for="(i, index) in annualReportTransportList" :key="index">
      <div class="chart1">
        <div style="height: 10px;"></div>
        <div style="font-weight: bold;margin-left: 2.5%;">{{i.organicType}}各季度处理费用(元)</div>
        <view class="charts-box">
          <div style="height: 10px;"></div>
          <qiun-data-charts type="pie" :opts="opts" :chartData="getChartData(i.data)" />
          <div style="height: 10px;"></div>
        </view>
      </div>
      <div style="height: 20px;"></div>
    </div>
    <!-- <div class="chart2">
      <div style="height: 10px;"></div>
      <div style="font-weight: bold;margin-left: 2.5%;">污水各季度处理费用(元)</div>
      <view class="charts-boxs">
        <div style="height: 10px;"></div>
        <qiun-data-charts type="pie" :opts="optss" :chartData="chartDatas" />
      </view>
    </div> -->
  </div>
</template>
<script>
import { getReport, exportReports,exportReport } from '../api/api.js';
import qiunDataCharts from '@/pagesScreen/subpackageuni/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
// import {config} from '../../common/request'
import request from '../../common/request.js';
export default {
  components: {
    qiunDataCharts
  },
  data() {
    return {
      year: '',
      request: request,
      base: '',
      chartData: {},
      chartDatas: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      },
      annualReportTransportList: []
      // optss: {
      //   color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
      //   padding: [5, 5, 5, 5],
      //   enableScroll: false,
      //   extra: {
      //     pie: {
      //       activeOpacity: 0.5,
      //       activeRadius: 10,
      //       offsetAngle: 0,
      //       labelWidth: 15,
      //       border: false,
      //       borderWidth: 3,
      //       borderColor: "#FFFFFF"
      //     }
      //   }
      // }
    };
  },
  methods: {
    _getReport(i) {
      getReport(i).then(res => {
        console.log('res-->', res);
        if (res.data.code === 200) {
          this.annualReportTransportList = []
          let niufenData = []
          let wushuiData = []
          if (res.data.data.annualReportTransportList.length > 0) {
            res.data.data.annualReportTransportList.forEach(i => {
              this.annualReportTransportList.push({
                organicType: i.organicType,
                data: [
                  {
                    "name": "一季度", "value": i.firstQuarter.treatmentPrice
                  },
                  {
                    "name": "二季度", "value": i.secondQuarter.treatmentPrice
                  },
                  {
                    "name": "三季度", "value": i.thirdQuarter.treatmentPrice
                  },
                  {
                    "name": "四季度", "value": i.fourthQuarter.treatmentPrice
                  },
                ]
              });
            });
          }
          console.log(this.annualReportTransportList);
          
        }else if(res.data.code==500){
          uni.showToast({
            title: '暂无数据',
            icon:'none'
          });
          setTimeout(() => {
              uni.navigateBack({
                 delta: 1
              });
          }, 1000);
        }
        console.log(res,'res-?');
      }) 
    },
    exportReport () {
      // wx.showLoading();
      wx.request({
        url: `${base}/annual-report/export`,
        data: {},
        method: 'post',
        responseType: 'arraybuffer',
        header: {
        Authorization: uni.getStorageSync("token")
      },
        success: function(res){
          // success
          console.log('res-->', res);
          const fs = wx.getFileSystemManager();
          console.log('fs-->', fs);
          fs.writeFile({
            filePath: wx.env.USER_DATA_PATH + "/年度报告.xlsx",
            data: res.data,
            encoding: "binary",
            success (res){
              console.log('rrrrr-->', res);
              wx.openDocument({
                filePath: wx.env.USER_DATA_PATH + "/年度报告.xlsx",
                showMenu: true,
                success: function (res) {
                  // setTimeout(()=>{wx.hideLoading()},500)
                }
              })
            },
            fail: function(err) {
              console.log('eerr-->', err);
            }
          })
        },
        fail: function() {
          // fail
        },
        complete: function() {
          // complete
        }
      })
    },
    getServerDatas(wushuiData) {
      console.log('wushuiData-->', wushuiData);
      let res = {
        series: [
          {
            data: wushuiData
          }
        ]
      };
      this.chartDatas = JSON.parse(JSON.stringify(res));
    },
    getServerData(niufenData) {
      console.log('niufenData-->', niufenData);
      let res = {
        series: [

          {
            data: niufenData
          }
        ]
      };
      this.chartData = JSON.parse(JSON.stringify(res));
    },
    getChartData (data) {
      return {
        series: [
          {
            data: data
          }
        ]
      }
    }
  },
  onReady() {
    // this.getServerData();
    // this.getServerDatas();
  },
  onShow() {
    this.year = uni.getStorageSync('reportYear');
    this._getReport(this.year);
    console.log(
      this.request, 'request'
    );
    this.base = this.request.config.baseURL;
  },
  onLoad(args) {
    // this.exportReport();

  },
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #ffffff;
  color: #000000;
  overflow-y: scroll;
}

.look {
  padding: 3px;
  color: #fff;
  background: #46a164;
  border-radius: 5px;
  width: 20%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}

// echarts
.charts-box {
  width: 100%;
  height: 320px;
}

.charts-boxs {
  width: 100%;
  height: 320px;
}

.chart2 {
  background: #fff;
  width: 95%;
  margin-left: 2.5%;
  border: 1px solid #1A512C;
  border-radius: 10px;
}

.chart1 {
  background: #fff;
  width: 95%;
  margin-left: 2.5%;
  border: 1px solid #1A512C;
  border-radius: 10px;
}

.btn {
  width: 95%;
  height: 60px;
  border-radius: 20rpx;
  background: #46a164;
  color: #fff;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
  margin-bottom: 20rpx;
  font-size: 18px;
}
</style>
